<template>
	<view v-if="isShowMore" class="showMoreView" :style="'top:'+ navigationBarHeight">
		 <block v-for="(item, index) in dataList" :key="index" >
			 <view class="morebtn" @click="$emit('carType', item)">
			 		<view class="moreText" v-if="item.vehicleName==undefined||item.vehicleName==null||item.vehicleName==''" > {{item.modelName}}</view>
					<view class="moreText" v-else > {{item.vehicleName}}</view>
			 </view>
			 
		 </block>
		<!-- <view class="morebtn" @click="$emit('carType1')">
				<view class="moreText"> 潮流 π - 星舰 3</view>
		</view>
	 
		<view class="morebtn" @click="$emit('carType2')">
				<view class="moreText"> 引力 π - 引力机车</view>
		</view> -->
	</view>
</template>

<script>
	const app = getApp();
	export default {
		name: "showMoreCarType",
		props: {
			isShowMore: {
				type: Boolean,
				default: false
			},
			dataList: {
				type: Array,
				default: () => {
					return []
				}
			},
		},
		data() {
			return {
				navigationBarHeight: app.globalData.statusBarHeight + 44 + 'px',
			};
		},
		methods: {

		},
		mounted() {
			uni.getSystemInfo({
				success: function(res) {
					console.log(res, 'getSystemInfo');
					var navigationBarHeight = res.statusBarHeight + 44 + 'px'; //px
				}
			})
		},
	}
</script>

<style>
	.showMoreView {
	 z-index: 100;
	 position: absolute;
	 /* top: 144px; */
	 margin-top: 50px;
	 left: 16px;
	 display: flex;
	 flex-direction: column;
 
	}

	.morebtn {
		display: flex;
		flex-direction: row;
		width: 200px;
		height: 40px;
		box-sizing: border-box;
		border-radius: 2px;
		text-align: center;
		line-height: 46px;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		border: 1px solid #ffffff;
		background-color: #ffffff;
		margin: 2px;


	}

	.moreImg {
		width: 20px;
		height: 20px;
		margin-right: 8px;
	}

	.moreText {
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 22px;
		display: flex;
		align-items: center;
		color: #3D3A3A;
	}
</style>
